<template>
  <div id="app">
    <transition v-bind:name="transitionName">
      <keep-alive :exclude="keepAliveList">
        <router-view class="routerView"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "App",

  data: function() {
    return {
      keepAliveList: ["home", "login", "openOrders"].toString(),
      transitionName: "slide-left"
    };
  },
  created: function() {
    var temp = ["test", "created"];
    this.$store.dispatch("asycAddData", temp);
  },
  mounted: function() {},
  watch: {
    $route: function(to, from) {
         // fromRouterName 在main.js文件注册全局变量参数，记录上次路由名(后期代码复杂，此逻辑不好维护)
        // 对于多页面 使用<router-link> 嵌套路由，会增加复杂度
        // alert(to.name+" == "+from.name);
        if(this.$route.name == 'homepage' || this.$route.name == 'testpage'){
          if(from.name == 'login' || from.name == 'homepage' || from.name == 'testpage'){
              this.transitionName = "slide-left"
              this.fromRouterName = "login";
          }else{
              this.transitionName = "slide-right"
          }
             
          return;
        }
       
        if(this.fromRouterName != ''){
            if(to.name == this.fromRouterName){
              // alert('back' + this.$route.name);
              this.transitionName="slide-right";
            }else{
              this.fromRouterName = from.name;
              this.transitionName = "slide-left"
            }
            
        }else{

          if(from.name != null){
              this.fromRouterName = from.name;
          }
        }


    }
  },
  methods: {},
  computed: {},
  components: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#app {
  //background-color: aqua;
  height: 100%;
}
/**适配页面切换动画 */
.routerView{
  position: absolute;
  width: 100%;
  transition: all .8s ease;
  top: 0;
}
/**transition 进入 == 左侧进入动画 */
.slide-left-enter-active {
  transition: all .3s ease;
}
.slide-left-leave-active {
  transition: all .4s ease;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
/**transition 返回 == 右侧返回动画 */
.slide-right-enter-active {
  transition: all .3s ease;
}
.slide-right-leave-active {
  transition: all .4s ease;
}
.slide-right-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-right-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>
